<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card manage">
      <!-- 头部 -->
      <div slot="header" class="clearfix manage_header">
        <!-- 返回 -->
        <div class="back" @click="backClick">
          <i></i>
          <span>返回</span>
        </div>
        <h1>新增图标</h1>
      </div>
      <!-- 表单 -->
      <el-form
        class="add_ariicle_select addPlug"
        :label-position="labelPosition"
        size="18px"
        label-width="100px"
        :model="erjizilei"
      >
        <!-- 新增子类 -->
        <div class="present addSoftSele">分类选择</div>
        <el-form-item label="分类名称:">
          <el-input v-model="erjizilei.name"></el-input>
        </el-form-item>
        <div class="articleSelect">
          <el-form-item label="二级子类:">
            <el-select v-model="valuea" clearable placeholder="全部">
              <el-option
                :label="item.label"
                v-for="item in options"
                :value="item.value"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="articleSelect">
          <el-form-item label="专题:">
            <el-select v-model="valuea" clearable placeholder="全部">
              <el-option
                :label="item.label"
                v-for="item in options"
                :value="item.value"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="专题名称:">
          <el-input v-model="erjizilei.name"></el-input>
        </el-form-item>
        <div class="present addSoftSele">插件参数</div>
        <el-form-item label="模板名称:">
          <el-input v-model="erjizilei.name"></el-input>
        </el-form-item>
        <el-form-item label="主图:" class="zhututu">
          <div class="zhutu">
            <el-upload
              class="upload-demo hg"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-change="handleChange"
              :file-list="fileList"
              list-type="picture"
            >
              <i></i>
              <p>选择图片</p>
              <div class="yes" v-if="photoLength !==0 && closeLength !==0">已选择图片</div>
              <div class="no" v-else>未选择图片</div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="购买积分:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <div class="present addSoftSele">辅助参数</div>
        <el-form-item label="壁纸格式:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <el-form-item label="大小:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <el-form-item label="时间:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <el-form-item label="尺寸:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <el-form-item label="系统:">
          <el-input v-model="erjizilei.type"></el-input>
        </el-form-item>
        <el-form-item label="软件介绍:">
          <div class="addSoftEditor">
            <Uediter></Uediter>
          </div>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <el-button class="save">保存</el-button>
    </el-card>
  </div>
</template>

<script>
import Uediter from '@/components/ue.vue'
export default {
  data() {
    return {
      // 百度富文本
      annouceForm: {
        name: ""
      },
      dat: {
          content: ''
        },
        ueditor: {
          value: '编辑器默认文字',
          config: {}
        },
      valuea: "全部",
      options: [
        { value: "选项1", label: "最近3天" },
        { value: "选项2", label: "最近5天" },
        { value: "选项3", label: "最近10天" },
        { value: "选项4", label: "最近15天" },
        { value: "选项5", label: "最近25天" }
      ],
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      editorOption: {
        placeholder: "编辑文章内容"
      },
      system: "1",
      labelPosition: "right",
      text: "应用",
      erjizilei: {
        name: "",
        region: "",
        type: ""
      },
      // 上传图片的长度
      photoLength: 0,
      // 点击上传按钮删除长度 
      closeLength: 0
    };
  },
  // 引入富文本
  components: {
    Uediter
  },
  methods: {
    // 百度富文本
    returnContent () {
        this.dat.content = this.$refs.ue.getUEContent()
        console.log(this.dat.content)
      },
    backClick() {
      this.$router.go(-1);
    },
    // 点击二级下拉
    erjiClick() {
      console.log(11);
    },
    // 上传成功之后
    handleSuccess(response, file, fileList) {
      // console.log(response);
      // console.log(file);
      // console.log(fileList.length);
      this.photoLength = fileList.length
    },
    // 上传文件发生改变时
    handleChange(file, fileList) {
      console.log(file, fileList);
      // console.log(fileList.length);
      // this.photoLength = fileList.length;
      console.log(fileList.length);
      
      
    },
    // 点击图片删除按钮
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.closeLength = fileList.length
      console.log(fileList.length);
      
    },
    handlePreview(file) {
      // console.log(file);
    }
  }
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.manage_header {
  margin: 10px 0 9px 30px;
  position: relative;
}
.manage_header i {
  /* display: block; */
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 20px;
  background: url("../assets/img/left.png") no-repeat;
  background-size: 10px 20px;
  vertical-align: middle;
}
.manage_header span {
  position: absolute;
  top: 0px;
  left: 22px;
  margin: 0;
  font-size: 20px;
  color: #3f51b5;
}
.manage_header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #212121;
}
.manage .el-card__header {
  padding: 0;
}
/* .present {
  margin-left: 66px;
} */
.el-input {
  width: 160px;
  height: 36px;
}
.el-form {
  margin: 20px 60px 62px;
}
label {
  font-size: 18px !important;
}
.el-form-item__label {
  padding: 0;
}
.upload_btn {
  background-color: #fff;
  width: 160px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.upload_btn i {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  background: url(../assets/img/photo.png) no-repeat;
  background-size: 28px 20px;
  margin: 0;
}
.upload_btn span {
  font-size: 16px;
  color: #757575;
  /* line-height: 47px; */
}
.upload_none {
  display: inline;
  margin-left: 10px;
}
.upload-demo {
  float: left;
}
.save {
  width: 200px;
  height: 50px;
  background: #3f51b5;
  border-radius: 5px;
  font-size: 24px;
  margin-left: 60px;
  color: #ffffff;
}
.manage h1 {
  padding: 0;
}
#app {
  text-align: center;
}
.erji {
  position: relative;
  width: 160px;
  height: 36px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.erji i {
  position: absolute;
  top: 10px;
  right: 15px;
}
.addSoftEditor {
  width: 802px;
  height: 513px;
}
.addSoftSele {
  margin-bottom: 26px;
}
.add_ariicle_select .el-select {
  width: 160px;
  height: 36px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
/* .articleSelect {
  margin-bottom: 34px;
} */
.plugSelect {
  margin-left: 55px;
}
/* 主图 */
.zhutu {
  width: 160px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  /* line-height: 36px; */
}
.zhutu i {
  display: inline-block;
  width: 28px;
  height: 20px;
  background: url("../assets/img/photo.png") no-repeat;
  background-size: 28px 20px;
  vertical-align: middle;
  margin-left: 16px;
  margin-right: 10px;
}
.zhutu p {
  display: inline-block;
  margin: 0;
  font-size: 16px;
  color: #757575;
}
.zhututu {
  position: relative;
}
.yes,.no {
  position: absolute;
  top: 0;
  left: 175px;
}
</style>
